﻿@model PTUDW_CNTN2010_F_CDT.Models.Product

<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" />
<script type="text/javascript" src="/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
    $(function () {
        $('#gallery a').lightBox({ fixedNavigation: true });
    });
</script>
<style type="text/css">
    li
    {
        margin: 0;
        list-style: none;
        display: inline;
    }

    a
    {
        text-decoration: none;
    }
</style>


<fieldset>
    <legend>Product</legend>

    <div id="picture" class="span-12">
        <div id="show3D"></div>
        <div id="gallery">
            <ul>
                <li>
                    <a href="/photos/image1.jpg" title="For this example: $('#gallery a').lightBox();">
                        <img src="/photos/thumb_image1.jpg" width="72" height="72" alt="">
                    </a>
                </li>
                <li>
                    <a href="/photos/image2.jpg" title="Phong cảnh mùa xuân">
                        <img src="/photos/thumb_image2.jpg" width="72" height="72" alt="">
                    </a>
                </li>
                <li>
                    <a href="/photos/image3.jpg" title="For this example: $('#gallery a').lightBox();">
                        <img src="/photos/thumb_image3.jpg" width="72" height="72" alt="">
                    </a>
                </li>
                <li>
                    <a href="/photos/image4.jpg" title="For this example: $('#gallery a').lightBox();">
                        <img src="/photos/thumb_image4.jpg" width="72" height="72" alt="">
                    </a>
                </li>
                <li>
                    <a href="/photos/image5.jpg" title="For this example: $('#gallery a').lightBox();">
                        <img src="/photos/thumb_image5.jpg" width="72" height="72" alt="">
                    </a>
                </li>
            </ul>
        </div>

    </div>

    <div id="info" class="span-10 last">
    <div class="ProName" >
           @Html.DisplayFor(model => model.ProductName)
    </div>


        <div class="row">
            <span class="Price">
                @Html.DisplayFor(model => model.Price)
            </span>

            <span class="AddCart">
                Quantity: @Html.TextBox("Quantity", Model.ProductId, new { style = "width: 20px;" })
                <a class="button" href="#" style="float: right"><span>Add to cart </span></a>
            </span>
        </div>

        <div class="row">
            <div id="product_comments_block_extra" style="clear: both;">
                <div class="comments_advices">
                    <a class="open-comment-form" href="#new_comment_form">Write your review</a>
                </div>
            </div>
        </div>

        <div class="row">
            <span class="st_facebook_hcount sharebtn" >
                <span style="text-decoration: none; color: #000000; display: inline-block; cursor: pointer;" class="stButton">
                    <span>
                        <span class="stMainServices st-facebook-counter" style="background-image: url(http://w.sharethis.com/images/facebook_counter.png);">&nbsp;
                <img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px;">
            </span>
                        <span class="stArrow">
                            <span class="stButton_gradient stHBubble" style="display: inline-block;">
                                <span class="stBubble_hcount">1</span>
                            </span>
                        </span>
                    </span>
                </span>
            </span>
        </div>
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ProductId }) |
    @Html.ActionLink("Back to List", "Index")
</p>
